<template>
  <div ref="canvasContainer" class="canvas-container">
    <canvas :id="id" style="height: 100%;width: 100%;" />
  </div>
</template>

<script>
export default {
  name: 'CanvasCircle',
  props: [
    'id', // 画布id
    'percent', // 百分比数据
    'bgColor', // 背景色
    'lightColor', // 高亮色
    'textPosition' // left or right 文本的显示位置
  ],
  data() {
    return {
      canvas: '',
      context: '',
      cirX: '',
      cirY: '',
      rad: '',
      r: '',
      number: 0,
      zoomFactor: '0.6' // 圆环半径的缩放因子
    }
  },
  mounted() {
    this.initCanvas()
    this.initParams()
    this.dreamLoading()
    window.addEventListener('resize', this.resizeCanvas, false)
  },
  methods: {
    // 初始化
    initCanvas() {
      this.canvas = document.getElementById(this.id)
      this.context = this.canvas.getContext('2d')
    },
    // 数据初始化
    initParams() {
      this.canvas.height = this.$refs.canvasContainer.offsetHeight
      this.canvas.width = this.$refs.canvasContainer.offsetWidth
      this.r = this.canvas.height / 2 * this.zoomFactor
      this.cirX = this.canvas.width / 2 // 圆的中心坐标x
      this.cirY = this.canvas.height / 2 // 圆的中心坐标y
      this.rad = Math.PI * 2 / 100
    },
    // 重置canvas
    resetCanvas() {
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
    },
    // 自适应画笔
    resizeCanvas() {
      this.initParams()
      this.resetCanvas()
      cancelAnimationFrame(this.dreamLoading())
      this.writeLine()
      this.writeText()
      this.writeCircle()
      this.writeBlue(this.percent)
    },
    // 绘制底圆
    writeCircle() {
      this.context.save()
      this.context.beginPath()
      this.context.strokeStyle = '#EEF0F5'
      this.context.lineWidth = this.canvas.height * 0.15
      this.context.arc(this.cirX, this.cirY, this.r, 0, Math.PI * 2, false)
      this.context.stroke() // 绘制边线
      //      this.context.restore();
      this.context.closePath()
    },
    // 绘制高亮圆弧
    writeBlue(number) {
      this.context.save()
      if (this.lightColor) {
        this.context.strokeStyle = this.lightColor
      } else {
        this.context.strokeStyle = '#23B1B4'
      }
      this.context.lineWidth = this.canvas.height * 0.16
      this.context.lineCap = 'round'
      this.context.beginPath()
      this.context.arc(this.cirX, this.cirY, this.r, -Math.PI / 2, -Math.PI / 2 + this.rad * number, false)
      this.context.stroke()
      this.context.restore()
    },
    // 绘制线
    writeLine() {
      this.context.save()
      if (this.lightColor) {
        this.context.strokeStyle = this.lightColor
      } else {
        this.context.strokeStyle = '#23B1B4'
      }
      this.context.lineWidth = 2

      let [startX, startY, endX, endY, lastEndX, lastEndY] = [0, 0, 0, 0, 0, 0]

      if (this.textPosition && this.textPosition === 'right') {
        startX = this.cirX + this.r
        startY = this.cirY - this.canvas.height * 0.1
        endX = this.cirX + this.r + this.canvas.height * 0.1
        endY = this.cirY - this.canvas.height * 0.3
        lastEndX = endX + this.canvas.height * 0.25
        lastEndY = endY
      } else {
        startX = this.cirX - this.r
        startY = this.cirY - this.canvas.height * 0.1
        endX = this.cirX - this.r - this.canvas.height * 0.1
        endY = this.cirY - this.canvas.height * 0.3
        lastEndX = endX - this.canvas.height * 0.25
        lastEndY = endY
      }
      this.context.moveTo(startX, startY)
      this.context.lineTo(endX, endY)
      this.context.lineTo(lastEndX, lastEndY)
      this.context.stroke()
      this.context.restore()
    },
    // 绘制文本
    writeText() {
      let [startX, startY] = [0, 0]
      if (this.textPosition && this.textPosition === 'right') {
        startX = this.cirX + this.r + this.canvas.height * 0.3
        startY = this.cirY - this.canvas.height * 0.32
      } else {
        startX = this.cirX - this.r - this.canvas.height * 0.4
        startY = this.cirY - this.canvas.height * 0.32
      }
      this.context.save()
      this.context.fillStyle = '#fff'
      this.context.fillText(this.number + '%', startX, startY)
      this.context.restore()
    },

    dreamLoading() {
      this.resetCanvas()
      this.writeLine()
      this.writeText()
      this.writeCircle()
      this.writeBlue(this.number)

      this.number += 1
      if (this.number <= this.percent) {
        console.log('this.number', this.number)
        requestAnimationFrame(this.dreamLoading)
      } else {
        // cancelAnimationFrame(this.dreamLoading())
        this.number = this.percent
      }
    }
  }

}
</script>

<style scoped>
  .canvas-container{
    width: 100%;
    height: 100%;
  }
</style>
